﻿@{
    //ViewBag.Title = "Probe";
    Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var ld = [];
        var len;
        var index;
        var interval;

        function updateSlider(val) {
            index = val;
            $("#sliderRange").val(val);
            if (ld.length > 0) {
                $("#animation").attr("src", "/Wap/ProbeImage/@{@ViewBag.QueryType}/" + ld[val - 1].Id + "-" + ld[val - 1].Stage);
                $("#observTime").html(ld[val - 1].ObservTime);
            }
        }

        function play(obj) {
            if ($(obj).hasClass("start")) {
                start();
                $(obj).removeClass("start").addClass("stop");
            } else {
                stop();
                $(obj).removeClass("stop").addClass("start");
            }
        }

        function start() {
            interval = setInterval(function () {
                index++;
                if (index > len) index = 1;
                updateSlider(index);
            }, 2000);
        }

        function stop() {
            clearInterval(interval);
        }

        function init() {
            index = len = ld.length;
            $("#sliderRange").attr("max", len);
            updateSlider(len);
            //显示时间刻度
            var html = new Array();
            for (var i = 0; i < ld.length; i++) {
                if (ld[i] && ld[i].ObservTime) {
                    html.push('<li>' + ld[i].ObservTime.substr(11, 5) + '</li>');
                }
            }
            $("#sliderTime").html(html.join(''));
        }

        function loadData(type) {
            stop();
            $("#play").removeClass("stop").addClass("start");
            $.getJSON("/Wap/ProbeJson/@ViewBag.StationNum/@ViewBag.QueryType-" + type, function (data) {
                ld = data;
                init();
            });
        }

        $(document).ready(function () {
            //var type = $("input[name='productType'][checked]").val();
            var type = '@ViewBag.FcstType';
            loadData(type);
            /*$("#sliderBar").width($(window).width() - 50);
            $(window).resize(function () {
                $("#sliderBar").width($(window).width() - 50);
            });*/
            /*$("input[name='productType']").change(function () {
            loadData($(this).attr("value"));
            });*/
            //start();
        });
    </script>
    <style>
        #sliderTime,#sliderTime li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #sliderTime li {
            float: left;
            width: 20%;
            margin-left: 0;
            text-align: center;
        }
    </style>
</head>
<body>
 
    <div style="padding: 7px;">
        <img id="animation" alt="" src="" />
        <div id='observTime' style="position: absolute; width: 100%; text-align: center;margin-bottom: 0px; "></div>
    </div>

    <div class="productType">
        @*<div>类型选择</div>
        <div class="radio">
            <ul>
                <li><input id="productType_fy2d_l" name="productType" type="radio" checked="checked" value="fy2d_l" /><label for="productType_fy2d_l">红外</label></li>
                <li><input id="productType_fy2d_m" name="productType" type="radio" value="fy2d_m" /><label for="productType_fy2d_m">水汽</label></li>
                <li><input id="productType_fy2d_vis" name="productType" type="radio" value="fy2d_vis" /><label for="productType_fy2d_vis">可见光</label></li>
            </ul>
        </div>*@
    
   
            @*<div>类型选择</div>
        <div class="radio">
            <ul>
                <li><input id="productType_zj" name="productType" type="radio" checked="checked" value="58457" /><label for="productType_zj">浙江雷达</label></li>
                <li><input id="productType_nb" name="productType" type="radio" value="58562" /><label for="productType_nb">宁波雷达</label></li>
                <li><input id="productType_sz" name="productType" type="radio" value="58556" /><label for="productType_sz">嵊州雷达</label></li>
            </ul>
        </div>*@
        <div class="clear"></div>
    </div>

    <div style="padding: 5px 0 5px 0; height: 120px; background: #fafafa; width: 100%;">
        <div style="float: left; text-align: center; width: 10%;">
            <span class="play"><a id="play" href="javascript:;" class="start" onclick="play(this);" onfocus="this.blur();"></a></span>
        </div>
        <div id="sliderBar" style="float:right;width:86%; height: 60px; position: relative; padding: 0 5px; margin-left:0px; margin-top: 6px;">
            <div style="width: 100%; float: left;">
                <input id="sliderRange" name="sliderRange" type="range" min="1" max="20" step="1" onchange="updateSlider(this.value)" style="max-width: none; width: 100%;" />
                <ul id="sliderTime"></ul>
            </div>
        
        </div>
    
    </div>
   
</body>
</html>